<script setup lang="ts">
import { ChatUserVo, CustomerServiceForm, CustomerServiceVo, CustomerServiceQuery } from '@/api/wxuser/types';
import { getSupport, saveSupport, getListChatUser, getListAllChatUser } from '@/api/wxuser';
import {TransferDirection} from 'element-plus';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const chatUserList = ref<ChatUserVo[]>([]);
const allChatUserList = ref<ChatUserVo[]>([]);
const chatIds = ref<Array<string | number>>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const queryFormRef = ref<ElFormInstance>();
const customServiceFormRef = ref<ElFormInstance>();
const initFormData: CustomerServiceForm = {
  tel: undefined,
  workTime: undefined,
  desc: undefined
};
const data = reactive<PageData<CustomerServiceForm, CustomerServiceQuery>>({
  form: { ...initFormData },
  queryParams: {},
  rules: {
    tel: [{ required: true, message: '客服电话不能为空', trigger: 'blur' }],
    workTime: [{ required: true, message: '工作时间不能为空', trigger: 'blur' }],
    desc: [{ required: true, message: '服务说明不能为空', trigger: 'blur' }]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询信息列表 */
const getInfo = async () => {
  loading.value = true;
  const res = await getSupport();
  form.value = res.data;
  loading.value = false;
};

const getChatUserList = async () => {
  const res = await getListChatUser();
  chatUserList.value = res.data;
  if (res.data) {
    res.data.forEach(item => {
      chatIds.value.push(item.chatId);
    });
  }
};

const getAllChatUserList = async () => {
  const res = await getListAllChatUser();
  allChatUserList.value = res.data;
  if(res.data){
    res.data.forEach(item => {
      if(item.checked){
        chatIds.value.push(item.chatId);
      }
    });
  }
  form.value.chatIds = chatIds.value;
  //await getChatUserList();
};

const submitForm = () => {
  customServiceFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      await saveSupport(form.value).finally(() => buttonLoading.value = false);
      proxy?.$modal.msgSuccess('操作成功');
      await getInfo();
    }
  });
};

const handleChatUserChange = (value: TransferKey[], direction: TransferDirection, movedKeys: TransferKey[]) => {
  form.value.chatIds = value;
  console.log("ChatIds",form.value.chatIds);
};

onMounted(() => {
  getInfo();
  getAllChatUserList();
 //getChatUserList();
});
</script>

<template>
  <div class="p-2 mt20 ml20">
    <el-form ref="customServiceFormRef" :model="form" :rules="rules">
      <el-tabs>
        <el-tab-pane label="客信息">
          <el-row>
            <el-col :span="12">
              <el-form-item label="客服电话" prop="tel">
                <el-input v-model="form.tel" placeholder="请输入客服电话"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="工作时间" prop="workTime">
                <el-input v-model="form.workTime" placeholder="请输入客服工作时间描述" type="textarea" :rows="3"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="服务说明" prop="desc">
                <el-input v-model="form.desc" placeholder="请输入服务说明" type="textarea" :rows="3"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="在线客服">
                <el-transfer v-model="chatIds" :data="allChatUserList" :titles="['系统用户列表','在线客服列表']" :props="{
                  key:'chatId',
                  label:'chatName'
                }" @change="handleChatUserChange"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">

</style>
